<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram Fig. 8.1</title>
</head>
<body>
<canvas id="circuitCanvas" width="550" height="350" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.textAlign = 'center';

    // Helper functions
    function drawResistor(x, y, w, h) {
        ctx.strokeRect(x, y, w, h);
    }

    function drawHeater(x, y, w, h) {
        ctx.strokeRect(x, y, w, h);
        const numLines = 3;
        for (let i = 1; i <= numLines; i++) {
            const lineX = x + (i * w) / (numLines + 1);
            ctx.beginPath();
            ctx.moveTo(lineX, y);
            ctx.lineTo(lineX, y + h);
            ctx.stroke();
        }
    }

    function drawTerminal(x, y, r) {
        // Save current style and fill with white to erase the line behind the terminal
        ctx.save();
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(x, y, r + 1, 0, 2 * Math.PI);
        ctx.fill();
        ctx.restore();
        
        // Draw the terminal circle
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.stroke();
    }

    function drawJunction(x, y, r) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fill();
    }

    // --- Main Drawing ---

    // Define coordinates for layout
    const yTopBranch = 120;
    const yBottomBranch = 200;
    const xLeftJunction = 120;
    const xRightJunction = 300;
    
    const resWidth = 120;
    const resHeight = 25;
    const xResStart = xLeftJunction + (xRightJunction - xLeftJunction - resWidth) / 2;
    const xResEnd = xResStart + resWidth;

    const yMidline = (yTopBranch + yBottomBranch) / 2;
    
    const heaterWidth = 80;
    const xHeaterStart = xRightJunction + 40;
    const xHeaterEnd = xHeaterStart + heaterWidth;

    const yTopLoop = 50;
    const xLoopLeft = 50;
    const xLoopRight = xHeaterEnd + 50;

    const xTerminal1 = 220;
    const xTerminal2 = 280;

    // Draw all wires first
    ctx.beginPath();

    // Parallel block wires
    // Top branch
    ctx.moveTo(xLeftJunction, yTopBranch);
    ctx.lineTo(xResStart, yTopBranch);
    ctx.moveTo(xResEnd, yTopBranch);
    ctx.lineTo(xRightJunction, yTopBranch);
    // Bottom branch
    ctx.moveTo(xLeftJunction, yBottomBranch);
    ctx.lineTo(xResStart, yBottomBranch);
    ctx.moveTo(xResEnd, yBottomBranch);
    ctx.lineTo(xRightJunction, yBottomBranch);
    // Vertical connectors for parallel block
    ctx.moveTo(xLeftJunction, yTopBranch);
    ctx.lineTo(xLeftJunction, yBottomBranch);
    ctx.moveTo(xRightJunction, yTopBranch);
    ctx.lineTo(xRightJunction, yBottomBranch);

    // Main circuit loop wires
    // Left part of the loop
    ctx.moveTo(xLeftJunction, yMidline);
    ctx.lineTo(xLoopLeft, yMidline);
    ctx.lineTo(xLoopLeft, yTopLoop);
    ctx.lineTo(xTerminal1, yTopLoop);
    // Right part of the loop
    ctx.moveTo(xRightJunction, yMidline);
    ctx.lineTo(xHeaterStart, yMidline);
    ctx.moveTo(xHeaterEnd, yMidline);
    ctx.lineTo(xLoopRight, yMidline);
    ctx.lineTo(xLoopRight, yTopLoop);
    ctx.lineTo(xTerminal2, yTopLoop);
    
    ctx.stroke();

    // Draw components on top of wires
    // Resistors
    drawResistor(xResStart, yTopBranch - resHeight / 2, resWidth, resHeight);
    drawResistor(xResStart, yBottomBranch - resHeight / 2, resWidth, resHeight);
    // Heater
    drawHeater(xHeaterStart, yMidline - resHeight / 2, heaterWidth, resHeight);

    // Draw junctions
    drawJunction(xLeftJunction, yMidline, 3.5);
    drawJunction(xRightJunction, yMidline, 3.5);

    // Draw source terminals
    drawTerminal(xTerminal1, yTopLoop, 5);
    drawTerminal(xTerminal2, yTopLoop, 5);

    // Draw labels
    ctx.textBaseline = 'bottom';
    ctx.fillText('E', (xTerminal1 + xTerminal2) / 2, yTopLoop - 8);
    ctx.fillText('10 Ω', xResStart + resWidth / 2, yTopBranch - resHeight / 2 - 5);
    ctx.fillText('H', xHeaterStart + heaterWidth / 2, yMidline - resHeight / 2 - 5);
    
    ctx.textBaseline = 'top';
    ctx.fillText('X', xResStart + resWidth / 2, yBottomBranch + resHeight / 2 + 5);
    
    // Draw figure caption
    ctx.font = 'bold 20px Arial';
    ctx.fillText('Fig. 8.1', 275, 320);

</script>
</body>
</html>